<script setup lang="ts">
import Hometitle from '@/components/Home/title.vue'
import ZHometitle from '@/components/Home/ztitle.vue'
import { get_Weather } from '@/request';
import { ref } from 'vue';
const obj = ref([])
get_Weather({
    unescape: 1,
    version: 'v91',
    appid: '56444199',
    appsecret: '3gkbcz0R'
}).then(resp => {
    obj.value = resp.data.data;
    console.log('天气数据', obj.value);
})
</script>

<template>
    <div class="container">
        <div class="top"></div>
        <div class="left">
            <div class="leftTop">
                <Hometitle title="环境监测"></Hometitle>
                <div id="weather">
                    <div class="box1">
                        <div class="d1">
                            <!-- {{obj[0].tem}} -->
                            ℃
                        </div>
                        <div class="d2">
                            <div>
                                <!-- {{obj[0].phrase}} -->
                                &nbsp;<button>47优</button>
                            </div>
                            <div>24~36℃</div>
                        </div>
                        <div class="d3">
                            <i></i>
                            <span>
                                <!-- {{obj[0].air_level}} -->
                                高温黄色预警
                            </span>
                        </div>
                    </div>
                    <div class="box2">
                        <div class="d1">
                            <p><i class="i1"></i>体感</p>
                            <p class="p1">
                                <!-- {{obj[0].tem1}} -->
                                ℃
                            </p>
                        </div>
                        <div class="d2">
                            <p><i class="i2"></i>风力</p>
                            <p class="p1">
                                <!-- {{obj[0].win_speed}} -->
                                %
                            </p>
                        </div>
                        <div class="d3">
                            <p><i class="i3"></i>湿度</p>
                            <p class="p1">
                                <!-- {{obj[0].humidity}} -->
                            </p>
                        </div>
                    </div>
                    <div class="box3">
                        <div class="d1">
                            <div>
                                <div class="s1">
                                    <p>24~36℃</p>
                                    <p><i class="i1"></i></p>
                                </div>
                                <div class="s2">
                                    <p>今天</p>
                                    <p><button>47优</button></p>
                                    <p>
                                        <!-- {{obj[1].wea_night}} -->
                                        晴
                                    </p>
                                </div>
                            </div>

                        </div>
                        <div class="d2">
                            <div>
                                <div class="s1">
                                    <p>22~38℃</p>
                                    <p><i class="i1"></i></p>
                                </div>
                                <div class="s2">
                                    <p>明天</p>
                                    <p><button>47优</button></p>
                                    <p>
                                        <!-- {{obj[2].wea_night}} -->
                                        阴
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="leftBottom">
                <Hometitle title="学生分布情况"></Hometitle>
                <EchartsOne></EchartsOne>
            </div>
        </div>
        <div class="center">
            <carous></carous>
            <div class="footer">
<footernav></footernav>
            </div>
            
        </div>
        <div class="right">
            <div class="rightTop">
                <ZHometitle title="水电用量"></ZHometitle>
                <div class="elewater">
                    <div class="ele">
                        <div class="ele1">
                            <p class="pp"></p>
                            <p>
                                <b>72670</b><br>
                                <span>总用电量（度）</span>
                            </p>
                        </div>
                        <div class="ele2">
                            <p class="pp"></p>
                            <p>
                                <b>6809</b><br>
                                <span>总用水量（吨）</span>
                            </p>
                        </div>
                    </div>
                    <EchartsTwo></EchartsTwo>
                </div>
            </div>
            <div class="rightBottom">
                <ZHometitle title="校园人员流动情况"></ZHometitle>
                <div class="schoolflow">
                    <div class="water">
                        <div class="water1">
                            <p class="pp"></p>
                            <p>
                                &emsp;&emsp;&emsp;&emsp; <b>6</b><br>
                                <span>昨日外来访客</span>
                            </p>
                        </div>
                        <div class="water2">
                            <p class="pp"></p>
                            <p>
                                &emsp;&emsp;&emsp;&emsp; <b>13</b><br>
                                <span>今日外来访客</span>
                            </p>
                        </div>
                    </div>
                   <EchartsThree></EchartsThree>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    position: relative;
    background-image: url('../../assets/images/pageBg.png');
    display: flex;

    .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background-image: url('../../assets/images/Top.png');
        background-size: 100% 80px;
        background-repeat: no-repeat;

    }

    .left {
        width: 32%;
        height: 100vh;
        background-image: url('../../assets/images/Left.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .leftTop {
            margin: 60px 80px 0px 70px;
            height: 48vh;

            #weather {
                width: 100%;
                height: 42vh;
                border: #4712f5 solid 1px;

                button {
                    width: 35px;
                    height: 20px;
                    font-size: 12px;
                    color: #ddd;
                    background: green;
                    border-radius: 8px;
                }

                .box1 {
                    width: 95%;
                    margin-left: 10px;
                    height: 8vh;
                    color: #ddd;
                    display: flex;


                    .d1 {
                        width: 28%;
                        height: 8vh;
                        font-weight: bold;
                        font-size: 40px;
                        line-height: 8vh;
                        text-align: center;
                    }

                    .d2 {
                        width: 35%;
                        height: 8vh;
                        line-height: 4vh;
                        font-size: 20px;
                        text-align: left;
                    }

                    .d3 {
                        width: 32%;
                        height: 8vh;
                        text-align: right;
                        line-height: 4vh;

                        i {
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background-color: orange;
                            margin-top: 10px;
                        }

                        span {
                            font-size: 16px;
                            color: yellow;
                        }
                    }
                }

                .box2 {
                    width: 95%;
                    margin-left: 10px;
                    height: 20vh;
                    border: #7161e9 solid 1px;
                    margin-top: 10px;
                    color: #ddd;

                    div {
                        width: 100%;
                        height: 33%;
                        border-bottom: #7161e9 solid 1px;
                        display: flex;
                        justify-content: space-between;
                    }

                    p {
                        width: 25%;
                        line-height: 50px;
                    }

                    .p1 {
                        font-weight: bold;
                        font-size: 25px;
                    }

                    .i1 {
                        display: inline-block;
                        width: 20%;
                        height: 30px;
                        margin-top: 10px;
                        margin-left: 20px;
                        background-image: url('../../assets/images/tigan.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }

                    .i2 {
                        display: inline-block;
                        width: 20%;
                        height: 30px;
                        margin-top: 10px;
                        margin-left: 20px;
                        background-image: url('../../assets/images/fengli.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }

                    .i3 {
                        display: inline-block;
                        width: 20%;
                        height: 30px;
                        margin-top: 10px;
                        margin-left: 20px;
                        background-image: url('../../assets/images/shidu.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }

                }

                .box3 {
                    width: 95%;
                    margin-left: 10px;
                    height: 10vh;
                    border: #7161e9 solid 1px;
                    margin-top: 10px;
                    color: #ddd;
                    display: flex;

                    .d1 {
                        width: 50%;
                        height: 8vh;
                        border-right: #7161e9 solid 1px;
                        margin: 10px;
                        font-size: 20px;
                        font-weight: bold;
                        line-height: 3vh;
                        display: flex;
                        justify-content: space-around;

                        .s1 {
                            height: 40px;
                            width: 100px;
                            display: flex;
                            justify-content: space-around;

                            .i1 {
                                display: inline-block;
                                width: 40px;
                                height: 30px;
                                background-image: url('../../assets/images/yueliang.png');
                                background-repeat: no-repeat;
                                margin-left: 70px;
                            }
                        }

                        .s2 {
                            height: 40px;
                            width: 180px;
                            display: flex;
                            justify-content: space-around;
                        }


                    }

                    .d2 {
                        width: 50%;
                        height: 8vh;
                        margin: 10px;
                        font-size: 20px;
                        font-weight: bold;
                        line-height: 3vh;
                        display: flex;
                        justify-content: space-around;

                        .s1 {
                            height: 40px;
                            width: 100px;
                            display: flex;
                            justify-content: space-around;

                            .i1 {
                                display: inline-block;
                                width: 40px;
                                height: 30px;
                                background-image: url('../../assets/images/taiyang.png');
                                background-repeat: no-repeat;
                                margin-left: 70px;
                            }
                        }

                        .s2 {
                            height: 40px;
                            width: 180px;
                            display: flex;
                            justify-content: space-around;
                        }


                    }

                }
            }
        }

        .leftBottom {
            margin: 30px 80px 0px 70px;
            height: 42vh;

            #student {
                width: 100%;
                height: 36vh;
                border: #4712f5 solid 1px;
            }
        }
    }

    .center {
        width: 36%;
        height: 100vh;
        position: relative;
        .footer{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 65px;
        }
    }

    .right {
        width: 32%;
        height: 100vh;
        background-image: url('../../assets/images/Right.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .rightTop {
            margin: 60px 80px 0px 70px;
            height: 42vh;

            .elewater {
                width: 95%;
                height: 36vh;
                border: #7161e9 solid 1px;
                padding: 15px;

                .ele {
                    width: 100%;
                    height: 8vh;
                    display: flex;
                    color: #ddd;

                    .ele1 {
                        width: 45%;
                        height: 70%;
                        border: #7161e9 solid 1px;
                        padding: 10px;
                        display: flex;
                        margin-right: 10px;
                        justify-content: space-around;

                        .pp {
                            width: 60px;
                            height: 50px;
                            background-image: url('../../assets/images/ele.png');
                            background-repeat: no-repeat;
                            background-size: 80% 90%;

                        }

                        b {
                            font-size: 30px;
                        }
                    }

                    .ele2 {
                        width: 45%;
                        height: 70%;
                        padding: 10px;
                        display: flex;
                        border: #7161e9 solid 1px;
                        justify-content: space-around;

                        .pp {
                            width: 60px;
                            height: 50px;
                            background-image: url('../../assets/images/water.png');
                            background-repeat: no-repeat;
                            background-size: 80% 90%;
                        }

                        b {
                            font-size: 30px;
                        }
                    }
                }

                #water {
                    width: 100%;
                    height: 30vh;
                    // border: #7161e9 solid 1px;
                }
            }
        }

        .rightBottom {
            margin: 40px 80px 0px 70px;
            height: 46vh;

            .schoolflow {
                width: 95%;
                height: 36vh;
                border: #7161e9 solid 1px;
                padding: 15px;

                .water {
                    width: 100%;
                    height: 8vh;
                    display: flex;
                    color: #ddd;

                    .water1 {
                        width: 45%;
                        height: 70%;
                        border: #7161e9 solid 1px;
                        padding: 10px;
                        display: flex;
                        margin-right: 10px;
                        justify-content: space-around;

                        .pp {
                            width: 30px;
                            height: 30px;
                            margin-top: 10px;
                            background-image: url('../../assets/images/yestoday.png');
                            background-repeat: no-repeat;
                            background-size: 80% 90%;

                        }

                        b {
                            font-size: 30px;
                            text-align: right;
                        }

                        span {
                            font-size: 14px;
                        }
                    }

                    .water2 {
                        width: 45%;
                        height: 70%;
                        padding: 10px;
                        display: flex;
                        border: #7161e9 solid 1px;
                        justify-content: space-around;

                        .pp {
                            width: 30px;
                            height: 30px;
                            margin-top: 10px;
                            background-image: url('../../assets/images/today.png');
                            background-repeat: no-repeat;
                            background-size: 80% 90%;
                        }

                        b {
                            font-size: 30px;
                        }

                        span {
                            font-size: 14px;
                        }
                    }
                }

                #school {
                    width: 100%;
                    height: 260px;
                    margin-top: 20px;
                }

            }
        }
    }
}
</style>
